/* eslint-disable react-hooks/exhaustive-deps */
import React, { useContext } from 'react'
import ReactEcharts from 'echarts-for-react'

import StudyInfo from '../StudyInfo';
import Interact from '../Interact';
import { useState } from 'react';
import { useEffect } from 'react';
import { getListByDuration } from '@/services/student';
import { Empty } from 'antd';
import { CourseContext } from '../../..';
import moment from 'moment';
export default function ClassData() {
  const ctx = useContext(CourseContext);

  const [data1, setData1] = useState<any>([]);
  const [data2, setData2] = useState<any>([]);
  const [data3, setData3] = useState<any>([]);
  const [showScroll, setshowScroll] = useState<boolean>(false);

  useEffect(() => {
    (async () => {
      const res = await getListByDuration({ uid: ctx.uid, courseId: ctx.courseId });
      const res1 = res.result?.map((item: any) => {
        return `${item.itemName} (${moment(item?.classroomStartTime).format('YYYY.MM.DD')})`
      })
      setData1(res1);
      if (res1?.length > 0) {
        if (res1?.length > 3) {
          setshowScroll(true)
        } else {
          setshowScroll(false)
        }
      }
      const res2 = res.result?.map((item: any) => {
        return item.inClassroomTime
      })
      setData2(res2);
      const res3 = res.result?.map((item: any) => {
        return item.inPlaybackTime
      })
      setData3(res3);
    })();
  }, [ctx])

  const colors = ['#ff5e5c', "#ff9d50"]
  const option = {
    color: colors,
    grid: {
      right: 120
    },
    legend: {
      orient: 'horization',

      data: [`直播时长`, '回放时长'],
      x: 'right',
      y: 'center',
    },
    xAxis: {
      type: 'category',
      axisTick: {
        show: false
      },
      axisLabel: {
        interval: 0,
        rotate: -20,
        top: 5,
        textStyle: {
          color: '#000',
          fontSize: 10,

        }
      },

      data: data1
    },
    yAxis: {
      type: 'value',
      name: '直播到课时间',

      axisLabel: {
        formatter: function (a: any) {

          let m = Math.ceil(a / 60)          // 作为返回值返回
          return `${m}`
        },
      },
      axisLine: {
        show: true,

      },
      splitNumber: 10,
      minInterval: 1,
    },
    dataZoom: [
      {
        type: 'slider',
        realtime: true,
        start: 0,
        end: Math.floor(100 / (data1.length / 3)),  // 数据窗口范围的结束百分比。范围是：0 ~ 100。
        height: 5, //组件高度
        // left: 5, //左边的距离
        // right: 5, //右边的距离
        bottom: 10, //下边的距离
        show: showScroll,  // 是否展示
        fillerColor: "rgba(17, 100, 210, 0.42)", // 滚动条颜色
        borderColor: "rgba(17, 100, 210, 0.12)",
        handleSize: 0,      //两边手柄尺寸
        showDetail: false, //拖拽时是否展示滚动条两侧的文字
        zoomLock: true,         //是否只平移不缩放
        moveOnMouseMove: false //鼠标移动能触发数据窗口平移
        //zoomOnMouseWheel: false, //鼠标移动能触发数据窗口缩放
      },
      {
        type: 'inside', // 内置在坐标系中
        start: 0, // 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。
        end: Math.floor(100 / (data1.length / 3)), // 数据窗口范围的结束百分比。范围是：0 ~ 100。
        zoomOnMouseWheel: false,  // 关闭滚轮缩放
        moveOnMouseWheel: true, // 开启滚轮平移
        moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移 
      }
    ],
    series: [
      {
        data: data2,

        label: {
          show: true,
          position: 'top',
          color: 'black',
          formatter: function (a: any) {
            let m = Math.floor(a.data / 60)
            let s = Math.floor(a.data % 60)
            // 作为返回值返回
            return `${m}分${s}秒`
          },
        },
        barWidth: 30,
        type: 'bar',
        name: `直播时长`
      },
      {
        data: data3,
        type: 'bar',
        name: `回放时长`,
        barWidth: 30,
        label: {
          show: true,
          position: 'top',
          color: 'black',
          formatter: function (a: any) {
            let m = Math.floor(a.data / 60)
            let s = Math.floor(a.data % 60)
            // 作为返回值返回
            return `${m}分${s}秒`
          },

        },

      },

    ]
  };

  return (
    <div style={{ marginBottom: '30px' }}>
      {
        data1 && data1?.length !== 0 ?
          <ReactEcharts notMerge option={option} /> :
          <Empty description={'直播课开没有开始哦'} image={Empty.PRESENTED_IMAGE_SIMPLE} />

      }
      <Interact type={1} />
      <StudyInfo type={1} />
    </div>
  )
}
